<template>
	<view class='diy' >
		<view class="layout" 
		v-bind:class="blk.layout.split('.')[0]"
		v-for="(blk,index) in diy_data">
		
			<view v-if="blk.layout.split('.')[0]=='lunbo'">
				<swiper :indicator-dots="true" 
				:style="{'height':blk.height+'rpx'}"
				:autoplay="true" 
				:interval="3000" 
				:duration="1000">
					<swiper-item v-for="(cube, cube_index) in blk.cubes">

						<view class="swiper-item">
							<navigator :open-type="cube.openType" :url="cube.link">
								<image :src="cube.image" mode="widthFix" ></image>
							</navigator>
						</view>
					</swiper-item>
					
				</swiper>
			</view>
			
			<view class="field" 
				:style="{'font-size':blk.fontSize+'px'}"
				v-if="blk.layout.split('.')[0]=='notice'">
				<view class="laba">
					<u-icon name="volume-fill" color="#ff652b" size="32"></u-icon>
				</view>
				<view class="message">
					<swiper 
					:style="{'height':blk.height+'rpx'}"
					:autoplay="true"
					circular='true'
					:vertical="blk.direction=='vertical'?true:false"
					:interval="blk.interval"
					:duration="blk.duration">
						<swiper-item v-for="(cube, cube_index) in blk.cubes">					
							<view class="swiper-item">
								{{cube.text}}
							</view>
						</swiper-item>						
					</swiper>
				</view>
			</view>
			
			<view class="field" v-if="blk.layout.split('.')[0]=='category'">
				<view class="item"
					:style="{'width':parseInt( 100 / parseInt(blk.col_num) )+'%' }"
				 v-for="(cat,cat_index) in blk.category">
					<!--
					<navigator :open-type="cat.openType" :url="cat.link" >
						<view class="img" :style="{'border-radius':blk.angle+'%'}" >
							<image :src="cat.image" mode="widthFix" ></image>
						</view>
						<view>{{cat.name}}</view>
					</navigator>
					-->
					<view 
						@tap="gotoCategoryTab(index,cat_index)" >
						<view class="img" :style="{'border-radius':blk.angle+'%'}" >
							<image :src="cat.image" mode="widthFix" ></image>
						</view>
						<view>{{cat.name}}</view>
					</view>
				</view>
				
			</view>
			
			<view　v-if="blk.layout.split('.')[0]=='image'" class="field">
				<view class="rubik" 
					:style="{height:blk.layout.split('.')[1]=='one'? blk.cubes.a.height + 'rpx':''}"
					v-bind:class="blk.layout.split('.')[1]" >
					<view 
					 :class="['cube',blk.layout.split('.')[1],cube_index
					 ,blk.layout.split('.')[1]=='free'?'col-'+blk.col_num:'']"
					 :style="{height:blk.layout.split('.')[1]=='one'? blk.cubes.a.height + 'rpx':''}"
					 v-for="(cube, cube_index) in blk.cubes" >
						
						<navigator  v-if="cube.page_link.key!='category'"
						:open-type="cube.openType" :url="cube.link" class="cube" >
							<image :src="cube.image" show-menu-by-longpress="true" 
							:style="{width:'calc(100% - '+ blk.cube_space+'px)',height:'calc(100% - '+ blk.cube_space+'px)'}"
							mode="scaleToFill" ></image>
						</navigator>
						
						<navigator @click="gotoCategoryTabFromImg(cube.page_link)" class="cube" v-if="cube.page_link.key=='category'">
							<image :src="cube.image" show-menu-by-longpress="true" 
							:style="{width:'calc(100% - '+ blk.cube_space+'px)',height:'calc(100% - '+ blk.cube_space+'px)'}"
							mode="scaleToFill" ></image>
						</navigator>
						
					</view>
				</view>
			</view>
			
			<view v-if="blk.layout=='product'" class="tuijian field">
				<!-- <view class="title">
					<image mode="widthFix" src="/static/image/skin/tuijian-title.jpg"></image>
				</view> -->
				<view class="product-list">
					
					<block v-for="(item, index ) in blk.cubes">
						<view v-bind:id="'goods-'+item.id" class="item">
					
							<navigator class="img" v-bind:url="'/sm_shop/pages/product/product?product_id='+item.id">
								<image  mode="widthFix" v-bind:src="item.image" alt="" />
							</navigator>
							<navigator>
								<text class="name">{{item.name}}</text>
							</navigator>
					
							<view class="sale-number">
								<text v-if="item.special>0" class="old-price text-line-through">¥{{item.price}}</text>
								销量:{{item.sale}}
							</view>
							<view class="price-buy">
								<view class="price">
									<text v-show="item.special<=0" class="text">¥{{item.price}}</text>
									<text v-show="item.special>0" class="text">¥{{item.special}}</text>
								</view>
								<!-- <view class="buy" @tap="gotoBuy( item.id )">
									<text class="text">马上抢</text>
								</view> -->
								<navigator class="buy" v-bind:url="'/sm_shop/pages/product/product?product_id='+item.id">
									<text class="text">马上抢</text>
								</navigator>
					
							</view>
						</view>
					</block>
					
				</view>
			</view>
			
			<view v-if="blk.layout=='article'" class="tuijian field">
				<view class="article-title">
					{{blk.title?blk.title:'推荐文章'}}
				</view>
				<view>
					
					<block v-for="(article, index ) in blk.cubes">
						<navigator class="article-item" v-bind:url="'/sm_shop/pages/article/article?article_id='+article.id">
							<div>{{article.title}}</div>
							<div>{{article.public_time}}</div>
						</navigator>
					</block>
					
				</view>
			</view>
		</view>

	</view>
</template>

<script>
const appInstance = getApp();
export default {
	
	props:[ 'diy_id', 'diy_data' ],
	data:function(){
		
		return{
			
		}
	},
	
	methods:{
		
		init:function(){
			
			if( this.diy_id ){
				
				this.axios.get( url ).then(function( res ){
					
				});
			}
			
		},
		gotoBuy: function(product_id) {
			uni.navigateTo({
				url: '/sm_shop/pages/product/product?product_id=' + product_id,
			});
		},
		gotoCategoryTabFromImg:function( page_link ){
		
			// console.log( 'gotoCategoryTabFromImg', page_link );
			
			var vuex_key = 'vuex_category_tab_id';
			if( !page_link.params.category_id.key ){
				vuex_key = 'vuex_category_tab_id';
			} else if( page_link.params.category_id.key=='category_id' ){
				vuex_key = 'vuex_category_tab_id';
			} else if( page_link.params.category_id.key=='brand_id' ){
				vuex_key = 'vuex_brand_tab_id';
			}
			this.$u.vuex( vuex_key , page_link.params.category_id.value)
			wx.switchTab({
				url:'/sm_shop/pages/category/category'
			});
		},
			
		gotoCategoryTab:function( blk_index, cat_index ){
			
			var current_cat = this.diy_data[blk_index].category[cat_index];
			// console.log('category_id:',current_cat);
			
			// this.$store.commit('$uStore',{
			// 	name:'vuex_category_tab_id',
			// 	value:cat_id
			// })

			if( current_cat.openType == 'switchTab' ){
				this.$u.vuex('vuex_category_tab_id', current_cat.id)
				wx.switchTab({
					url:current_cat.link
				});
			}
		}
	},
	
	watch:{
		
		// diy_id:function( a, b ){
			
			
		// },
		// diy_data:function( a, b ){
			
			
			
		// },
		
	},
	
	created:function(){
		
		// console.log('diy');
		// console.log( this.diy_id );
		// console.log( this.diy_data );
		
		
	}
		
}
</script>

<style lang="less">
	@import './diy.less';
</style>
